<style type="text/css">
#gadgetContent {
    border: 1px solid;
    width: 400px;
    height: 600px;
    overflow: auto;
}

#title {
    width: 400px;
    background-color: #22aa22;
    color: white;
    cursor: default;
    float: left;
    clear: both;
    border-bottom: 2px solid;
}

.songItem {
    width: 400px;
    background-color: #88ff88;
    cursor: pointer;
    float: left;
    clear: both;
    border-bottom: 1px solid;
}

.videoItem {
    width: 400px;
    float: left;
    clear: both;
    background-color: #fff;
}

#footer {
    width: 400px;
    float: right;
    clear: both;
    background-color: #888888;
    cursor: pointer;
}

#addSongSection {
    visibility: hidden;
    width: 400px;
    float: left;
    clear: both;
    cursor: pointer;
}
</style>



<div id="gadgetContent">
    <div id="title">YouTube Playlist Gadget</div>
    <div id="itemList"></div>
    <div id="footer">Add</div>
    <div id="addSongSection">
        <div style="width: 200px">Author:</div><input id="authorInput" type="text"></input><br />
        <div style="width: 200px">Title:</div><input id="titleInput" type="text"></input><br />
        <div style="width: 200px">ID:</div><input id="urlInput" type="text"></input><br />
        <input id="submitButton" type="button" value="Add"></input>

    </div>
</div>
<script type="text/javascript" src="http://youtube-playlist-gadget.googlecode.com/svn/trunk/YoutubePlaylistGadget/test.js"></script>
<script type="text/javascript">
    alert(typeof(helloWorld));
</script>
<script type="text/javascript">

var Item = function(cfg) {
    this.title = cfg.title;
    this.author = cfg.author;
    this.ytUrl = cfg.ytUrl;
    this.parent = cfg.parent;
    this.el = cfg.el;

    function removeThis() {
        this.parent.removeChild(this.el);
    }
};

var playlist = [];
var footer = document.getElementById('footer');

var gadgetPrefs;
var list;
try {
   gadgetPrefs = new gadgets.Prefs();
} catch(e) {
    alert("can't get prefs profile");
}

try {
   list = gadgetPrefs.getArray("ytList");
} catch(e) {
    alert("Can't retrieve prefs");
}


footer.onclick = function(cfg) {
    var addSongSectionEl = document.getElementById('addSongSection');
    addSongSectionEl.style.visibility = "visible";
};

var addSong = function(author, title, url, updateServer) {
    var songEl = document.createElement('div');
    songEl.setAttribute("name", "song");
    songEl.appendChild(document.createTextNode(title + " - " + author));
    songEl.setAttribute("class", "songItem");



    var videoEl = document.createElement('div');
    videoEl.setAttribute('class', 'videoItem');
    videoEl.setAttribute('id', 'activeVideo');
    videoEl.innerHTML = '

    songEl.onclick = function(song) {
        var el = song.currentTarget;
        var activeVideo = document.getElementById('activeVideo');

        if (activeVideo) {
            activeVideo.parentNode.removeChild(activeVideo);
        }

        el.appendChild(videoEl);
    }

    var parent = document.getElementById('itemList');
    parent.appendChild(songEl);
    playlist.push(new Item({
        title: title,
        author: author,
        ytUrl: url,
        parent: parent,
        el: songEl
    }));

    if (typeof(list) == 'undefined') {
        list = [];
    }

    if (updateServer) {
        list.push(author);
        list.push(title);
        list.push(url);

        gadgetPrefs.setArray("ytList", list);
    }
};

var submitButton = document.getElementById('submitButton');
submitButton.onclick = function(cfg) {
    var authorEl = document.getElementById('authorInput');
    var titleEl = document.getElementById('titleInput');
    var urlEl = document.getElementById('urlInput');

    var author = authorEl.value;
    var title = titleEl.value;
    var url = urlEl.value;



    if (url.match(/.*&.*/)) {
        url = url.replace(/([^&]*)&.*/g, "$1");
    }

    authorEl.value = "";
    titleEl.value = "";
    urlEl.value = "";

    addSong(author, title, url, true);

    document.getElementById('addSongSection').style.visibility = 'hidden';
};
if (typeof(list) != 'undefined') {
    try {
        var flood = 0;
        var i = 0;
        while (i < list.length) {
            var au = list[i++];
            var ti = list[i++];
            var u = list[i++];
            addSong(au, ti, u, false);
            flood++;
            if (flood > 100) {
              break;
            }
        }
    } catch (e) {

    }
}

</script>
